<template>
  <div>
    <span v-for="(item, index) in buttonData" :key="index">
      <span v-if="item.isShow ? item.isShow(item) : true" class="m-r-5" :style="item.style">
        <el-button class="m-b-5" v-if="item.kind == 'button'" :plain="item.plain" :type="item.type" :size="item.size"
          @click="item.click && item.click()">{{ item.label }}</el-button>
        <template v-if="item.kind == 'dropdown'">
          <dropdown :dropData="item" :size="item.size" />
        </template>
      </span>
    </span>
  </div>
</template>

<script>
import dropdown from "./dropdown";
export default {
  components: {
    dropdown,
  },
  props: {
    buttonData: {
      type: Array,
      default: () => [],
    },
    marginBottom: {
      type: String,
      default: "10px",
    },
  },
  data() {
    return {
      activeCommand: {},
    };
  },
  created() { },
  methods: {
    handleCommand(item) {
      this.activeCommand = item;
      // let _obj = {};
      // _obj[item.ref] = val;
      // Object.assign(this.activeCommand, _obj);
      // this.aa = val;
      // item.click && item.click(val);
    },
  },
};
</script>

<style lang="less" scoped>
  .m-r-5 {
    margin-right: 10px;
  }
  .m-b-5 {
    margin-bottom: v-bind(marginBottom);
  }
</style>
